<!DOCTYPE html>
<!-- Available query parameters to configure the behavior of this page -->
<!-- showControlsPanel: if true, display buttons to apply overlays to BPMN elements (on the left side of the page) -->
<!-- showMousePointer: if true, highlight/show the mouse position -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bpmn-visualization - Overlays</title>
  <link rel="icon" type="image/svg+xml" href="./static/img/favicon.svg">
  <link rel="stylesheet" href="./static/css/test-page.css">
  <style>
    .overlay {
      background-color: MintCream;
    }
  </style>
  <script src="../ts/pages/overlays.ts" type="module"></script>
</head>
<body>
<div class="flex-container">
  <div id="controls-panel" class="flex-column-container hidden" style="flex-grow: 1">
    <div class="info">
      <!-- https://icons.getbootstrap.com/icons/info-square-fill/ -->
      <svg width="28px" height="28px" viewBox="0 0 16 16" class="bi bi-info-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd"
              d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm8.93 4.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
      </svg>
      <div class="tooltip">
        <p>Drag and Drop a BPMN file</p>
      </div>
    </div>

    <!-- Overlay -->
    <h5>Overlay</h5>
    <label for="bpmn-id-input">Selected BPMN Element</label>
    <input id="bpmn-id-input">
    <button type="button" class="overlay" id="clear" title="Remove all the overlays of the selected BPMN element">
      <!-- By The Icon Z, ID, From https://thenounproject.com/term/clear/3322994/ -->
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path
            d="M8.98 5.85C8.42 5.85 7.88 6.09 7.48 6.52C7.13 6.92 4.29 10.05 3.94 10.44C3.14 11.3 3.14 12.7 3.94 13.56C4.29 13.95 7.13 17.09 7.48 17.48C7.88 17.91 8.42 18.15 8.98 18.15C9.93 18.15 17.55 18.15 18.51 18.15C19.66 18.15 20.59 17.15 20.59 15.91C20.59 15.13 20.59 8.87 20.59 8.09C20.59 6.85 19.66 5.85 18.51 5.85C18.51 5.85 9.93 5.85 8.98 5.85ZM9.74 16.12C9.48 16.12 9.24 16.01 9.06 15.81C8.71 15.42 5.87 12.29 5.51 11.9C5.15 11.5 5.15 10.87 5.51 10.47C5.8 10.15 8.13 7.59 8.42 7.27C8.58 7.14 8.78 7.07 8.98 7.07C9.93 7.07 17.55 7.07 18.51 7.07C19.03 7.07 19.45 7.52 19.45 8.08C19.45 8.77 19.45 14.26 19.45 14.94C19.49 15.55 19.06 16.08 18.5 16.12C18.45 16.12 18.39 16.12 18.34 16.12C16.62 16.12 11.46 16.12 9.74 16.12ZM13.95 12C14.59 12.69 14.95 13.07 15.02 13.15C15.25 13.39 15.25 13.77 15.04 14.02C14.82 14.26 14.46 14.27 14.23 14.03C14.23 14.03 14.22 14.02 14.22 14.02C14.15 13.94 13.79 13.56 13.14 12.86C12.5 13.56 12.14 13.94 12.07 14.02C11.85 14.25 11.49 14.25 11.27 14.02C11.04 13.78 11.04 13.39 11.27 13.15C11.34 13.07 11.7 12.69 12.34 12C11.7 11.31 11.34 10.93 11.27 10.85C11.04 10.61 11.04 10.22 11.27 9.98C11.49 9.75 11.85 9.75 12.07 9.98C12.14 10.06 12.5 10.44 13.14 11.14C13.79 10.44 14.15 10.06 14.22 9.98C14.44 9.75 14.8 9.76 15.02 10C15.24 10.24 15.24 10.61 15.02 10.85C14.88 11 14.52 11.39 13.95 12Z"
            id="b1pNzAP5nk"></path>
        </defs>
        <g>
          <use xlink:href="#b1pNzAP5nk" opacity="1" fill="#000000" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="start" title="Add overlay on the start of the edge">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path d="M20.5 15.49L17.5 19.11L17.5 11.86L17.5 4.62L20.5 8.24L23.5 11.86L20.5 15.49Z" id="b1Hrf82jB2"></path>
          <path d="M19.74 12C16.55 12 10.17 12 0.59 12" id="a22Hrm2jxs"></path>
          <path d="M6.59 11.86C6.59 14.31 5.25 16.29 3.59 16.29C1.94 16.29 0.59 14.31 0.59 11.86C0.59 9.42 1.94 7.44 3.59 7.44C5.25 7.44 6.59 9.42 6.59 11.86Z"
                id="b2hlvdIfrY"></path>
        </defs>
        <g>
          <use xlink:href="#b1Hrf82jB2" opacity="1" fill="#12010d" fill-opacity="1"></use>
          <use xlink:href="#a22Hrm2jxs" opacity="1" fill-opacity="0" stroke="#040501" stroke-width="2" stroke-opacity="1"></use>
          <use xlink:href="#b2hlvdIfrY" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="middle" title="Add overlay on the middle of the edge">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path d="M20.5 15.49L17.5 19.11L17.5 11.86L17.5 4.62L20.5 8.24L23.5 11.86L20.5 15.49Z" id="b1Hrf82jB2"></path>
          <path d="M19.74 12C16.55 12 10.17 12 0.59 12" id="a22Hrm2jxs"></path>
          <path d="M12.37 11.86C12.37 14.31 11.03 16.29 9.37 16.29C7.72 16.29 6.37 14.31 6.37 11.86C6.37 9.42 7.72 7.44 9.37 7.44C11.03 7.44 12.37 9.42 12.37 11.86Z"
                id="a3UW4OJtps"></path>
        </defs>
        <g>
          <use xlink:href="#b1Hrf82jB2" opacity="1" fill="#12010d" fill-opacity="1"></use>
          <use xlink:href="#a22Hrm2jxs" opacity="1" fill-opacity="0" stroke="#040501" stroke-width="2" stroke-opacity="1"></use>
          <use xlink:href="#a3UW4OJtps" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="end" title="Add overlay on the end of the edge">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path d="M20.5 15.49L17.5 19.11L17.5 11.86L17.5 4.62L20.5 8.24L23.5 11.86L20.5 15.49Z" id="b1Hrf82jB2"></path>
          <path d="M19.74 12C16.55 12 10.17 12 0.59 12" id="a22Hrm2jxs"></path>
          <path d="M17.19 11.73C17.19 14.17 15.85 16.15 14.19 16.15C12.54 16.15 11.19 14.17 11.19 11.73C11.19 9.29 12.54 7.3 14.19 7.3C15.85 7.3 17.19 9.29 17.19 11.73Z"
                id="aL951rTpo"></path>
        </defs>
        <g>
          <use xlink:href="#b1Hrf82jB2" opacity="1" fill="#12010d" fill-opacity="1"></use>
          <use xlink:href="#a22Hrm2jxs" opacity="1" fill-opacity="0" stroke="#040501" stroke-width="2" stroke-opacity="1"></use>
          <use xlink:href="#aL951rTpo" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="top-left" title="Add overlay on the top left of the shape">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path
            d="M21.18 16.27C21.18 18.44 19.62 20.19 17.71 20.19C14.73 20.19 9.27 20.19 6.29 20.19C4.38 20.19 2.82 18.44 2.82 16.27C2.82 13.92 2.82 10.78 2.82 8.42C2.82 6.26 4.38 4.5 6.29 4.5C9.27 4.5 14.73 4.5 17.71 4.5C19.62 4.5 21.18 6.26 21.18 8.42C21.18 10.78 21.18 13.92 21.18 16.27Z"
            id="b38fGJxyxD"></path>
          <path d="M0.85 5.76C0.85 4.06 2.18 2.68 3.82 2.68C5.47 2.68 6.8 4.06 6.8 5.76C6.8 7.46 5.47 8.85 3.82 8.85C2.18 8.85 0.85 7.46 0.85 5.76Z" id="a30JgDXm9"></path>
        </defs>
        <g>
          <use xlink:href="#b38fGJxyxD" opacity="1" fill-opacity="0" stroke="#010200" stroke-width="1" stroke-opacity="1"></use>
          <use xlink:href="#a30JgDXm9" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="top-center" title="Add overlay on the top center of the shape">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path
            d="M21.18 16.27C21.18 18.44 19.62 20.19 17.71 20.19C14.73 20.19 9.27 20.19 6.29 20.19C4.38 20.19 2.82 18.44 2.82 16.27C2.82 13.92 2.82 10.78 2.82 8.42C2.82 6.26 4.38 4.5 6.29 4.5C9.27 4.5 14.73 4.5 17.71 4.5C19.62 4.5 21.18 6.26 21.18 8.42C21.18 10.78 21.18 13.92 21.18 16.27Z"
            id="b38fGJxyxD"></path>
          <path d="M9.02 4.5C9.02 2.79 10.36 1.41 11.99 1.41C13.64 1.41 14.97 2.79 14.97 4.5C14.97 6.2 13.64 7.59 11.99 7.59C10.36 7.59 9.02 6.2 9.02 4.5Z" id="a2qjjh30WU"></path>
        </defs>
        <g>
          <use xlink:href="#b38fGJxyxD" opacity="1" fill-opacity="0" stroke="#010200" stroke-width="1" stroke-opacity="1"></use>
          <use xlink:href="#a2qjjh30WU" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="top-right" title="Add overlay on the top right of the shape">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path
            d="M21.18 16.27C21.18 18.44 19.62 20.19 17.71 20.19C14.73 20.19 9.27 20.19 6.29 20.19C4.38 20.19 2.82 18.44 2.82 16.27C2.82 13.92 2.82 10.78 2.82 8.42C2.82 6.26 4.38 4.5 6.29 4.5C9.27 4.5 14.73 4.5 17.71 4.5C19.62 4.5 21.18 6.26 21.18 8.42C21.18 10.78 21.18 13.92 21.18 16.27Z"
            id="b38fGJxyxD"></path>
          <path d="M16.85 5.76C16.85 4.06 18.18 2.68 19.82 2.68C21.47 2.68 22.8 4.06 22.8 5.76C22.8 7.46 21.47 8.85 19.82 8.85C18.18 8.85 16.85 7.46 16.85 5.76Z"
                id="dc6GaQ2oN"></path>
        </defs>
        <g>
          <use xlink:href="#b38fGJxyxD" opacity="1" fill-opacity="0" stroke="#010200" stroke-width="1" stroke-opacity="1"></use>
          <use xlink:href="#dc6GaQ2oN" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="middle-right" title="Add overlay on the middle right of the shape">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path
            d="M21.18 16.27C21.18 18.44 19.62 20.19 17.71 20.19C14.73 20.19 9.27 20.19 6.29 20.19C4.38 20.19 2.82 18.44 2.82 16.27C2.82 13.92 2.82 10.78 2.82 8.42C2.82 6.26 4.38 4.5 6.29 4.5C9.27 4.5 14.73 4.5 17.71 4.5C19.62 4.5 21.18 6.26 21.18 8.42C21.18 10.78 21.18 13.92 21.18 16.27Z"
            id="b38fGJxyxD"></path>
          <path d="M18.21 12.34C18.21 10.64 19.54 9.26 21.17 9.26C22.82 9.26 24.16 10.64 24.16 12.34C24.16 14.04 22.82 15.43 21.17 15.43C19.54 15.43 18.21 14.04 18.21 12.34Z"
                id="b7H9MFGaQ"></path>
        </defs>
        <g>
          <use xlink:href="#b38fGJxyxD" opacity="1" fill-opacity="0" stroke="#010200" stroke-width="1" stroke-opacity="1"></use>
          <use xlink:href="#b7H9MFGaQ" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="bottom-right" title="Add overlay on the top right of the shape">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path
            d="M21.18 16.27C21.18 18.44 19.62 20.19 17.71 20.19C14.73 20.19 9.27 20.19 6.29 20.19C4.38 20.19 2.82 18.44 2.82 16.27C2.82 13.92 2.82 10.78 2.82 8.42C2.82 6.26 4.38 4.5 6.29 4.5C9.27 4.5 14.73 4.5 17.71 4.5C19.62 4.5 21.18 6.26 21.18 8.42C21.18 10.78 21.18 13.92 21.18 16.27Z"
            id="b38fGJxyxD"></path>
          <path d="M16.85 19.51C16.85 17.81 18.18 16.43 19.82 16.43C21.47 16.43 22.8 17.81 22.8 19.51C22.8 21.21 21.47 22.6 19.82 22.6C18.18 22.6 16.85 21.21 16.85 19.51Z"
                id="a1I8UgfMpA"></path>
        </defs>
        <g>
          <use xlink:href="#b38fGJxyxD" opacity="1" fill-opacity="0" stroke="#010200" stroke-width="1" stroke-opacity="1"></use>
          <use xlink:href="#a1I8UgfMpA" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="bottom-center" title="Add overlay on the bottom center of the shape">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path
            d="M21.18 16.27C21.18 18.44 19.62 20.19 17.71 20.19C14.73 20.19 9.27 20.19 6.29 20.19C4.38 20.19 2.82 18.44 2.82 16.27C2.82 13.92 2.82 10.78 2.82 8.42C2.82 6.26 4.38 4.5 6.29 4.5C9.27 4.5 14.73 4.5 17.71 4.5C19.62 4.5 21.18 6.26 21.18 8.42C21.18 10.78 21.18 13.92 21.18 16.27Z"
            id="b38fGJxyxD"></path>
          <path d="M9.02 20.19C9.02 18.49 10.36 17.11 11.99 17.11C13.64 17.11 14.97 18.49 14.97 20.19C14.97 21.89 13.64 23.28 11.99 23.28C10.36 23.28 9.02 21.89 9.02 20.19Z"
                id="bppu6sfFE"></path>
        </defs>
        <g>
          <use xlink:href="#b38fGJxyxD" opacity="1" fill-opacity="0" stroke="#010200" stroke-width="1" stroke-opacity="1"></use>
          <use xlink:href="#bppu6sfFE" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="bottom-left" title="Add overlay on the bottom left of the shape">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path
            d="M21.18 8.42C21.18 10.78 21.18 13.92 21.18 16.27C21.18 18.44 19.62 20.19 17.71 20.19C14.73 20.19 9.27 20.19 6.29 20.19C4.38 20.19 2.82 18.44 2.82 16.27C2.82 13.92 2.82 10.78 2.82 8.42C2.82 6.26 4.38 4.5 6.29 4.5C9.27 4.5 14.73 4.5 17.71 4.5C19.62 4.5 21.18 6.26 21.18 8.42Z"
            id="c18B1s7AYL"></path>
          <path d="M3.57 22.35C2.21 22.35 1.1 20.96 1.1 19.26C1.1 17.56 2.21 16.18 3.57 16.18C4.94 16.18 6.05 17.56 6.05 19.26C6.05 20.96 4.94 22.35 3.57 22.35Z"
                id="a1lKJcmcZY"></path>
        </defs>
        <g>
          <use xlink:href="#c18B1s7AYL" opacity="1" fill-opacity="0" stroke="#010200" stroke-width="1" stroke-opacity="1"></use>
          <use xlink:href="#a1lKJcmcZY" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="middle-left" title="Add overlay on the middle left of the shape">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path
            d="M21.18 16.27C21.18 18.44 19.62 20.19 17.71 20.19C14.73 20.19 9.27 20.19 6.29 20.19C4.38 20.19 2.82 18.44 2.82 16.27C2.82 13.92 2.82 10.78 2.82 8.42C2.82 6.26 4.38 4.5 6.29 4.5C9.27 4.5 14.73 4.5 17.71 4.5C19.62 4.5 21.18 6.26 21.18 8.42C21.18 10.78 21.18 13.92 21.18 16.27Z"
            id="b38fGJxyxD"></path>
          <path d="M0 12.34C0 10.64 1.33 9.26 2.97 9.26C4.62 9.26 5.95 10.64 5.95 12.34C5.95 14.04 4.62 15.43 2.97 15.43C1.33 15.43 0 14.04 0 12.34Z" id="b1hDiEZ2vk"></path>
        </defs>
        <g>
          <use xlink:href="#b38fGJxyxD" opacity="1" fill-opacity="0" stroke="#010200" stroke-width="1" stroke-opacity="1"></use>
          <use xlink:href="#b1hDiEZ2vk" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="font" title="Add overlay with a custom font">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path id="a3NsOezuRV"
                d="M11.98 1.39C17.76 1.39 22.45 6.13 22.45 11.98C22.45 17.83 17.76 22.61 11.98 22.61C6.24 22.61 1.55 17.83 1.55 11.98C1.55 6.13 6.24 1.39 11.98 1.39Z"></path>
          <text id="a4CCg6lKv3" x="0" y="0" font-size="23" font-family="Arial" font-style="normal" dominant-baseline="text-before-edge">
            <tspan x="4" y="-2.2">A</tspan>
          </text>
        </defs>
        <g>
          <use xlink:href="#a3NsOezuRV" opacity="1" fill="#f65bc3" fill-opacity="1"></use>
          <use xlink:href="#a4CCg6lKv3" opacity="1" fill="#000000" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="fill" title="Add overlay with a custom fill">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path id="eK2XpgG"
                d="M11.98 1.39C17.76 1.39 22.45 6.13 22.45 11.98C22.45 17.83 17.76 22.61 11.98 22.61C6.24 22.61 1.55 17.83 1.55 11.98C1.55 6.13 6.24 1.39 11.98 1.39Z"></path>
          <text id="a3ohUzQqHO" x="0" y="0" font-size="17" font-family="Arial" font-style="normal" dominant-baseline="text-before-edge">
            <tspan x="6.5" y="1.2">A</tspan>
          </text>
        </defs>
        <g>
          <use xlink:href="#eK2XpgG" opacity="1" fill="#ffa07a" fill-opacity="1"></use>
          <use xlink:href="#a3ohUzQqHO" opacity="1" fill="#ffffff" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
    <button type="button" class="overlay" id="stroke" title="Add overlay with a custom stroke">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
        <defs>
          <path id="ax8mCAIIW"
                d="M1.55 11.98C1.55 6.13 6.24 1.39 11.98 1.39C17.76 1.39 22.45 6.13 22.45 11.98C22.45 17.83 17.76 22.61 11.98 22.61C6.24 22.61 1.55 17.83 1.55 11.98Z"></path>
          <clipPath id="clipaVAKDTTRf">
            <use xlink:href="#ax8mCAIIW" opacity="1"></use>
          </clipPath>
          <text id="aqhG1JyC" x="0" y="0" font-size="17" font-family="Arial" font-style="normal" dominant-baseline="text-before-edge">
            <tspan x="6.5" y="1.2">A</tspan>
          </text>
        </defs>
        <g>
          <g clip-path="url(#clipaVAKDTTRf)">
            <use xlink:href="#ax8mCAIIW" opacity="1" fill="#f65bc3" fill-opacity="1" stroke="#000000" stroke-width="4" stroke-opacity="1"></use>
          </g>
          <use xlink:href="#aqhG1JyC" opacity="1" fill="#ffffff" fill-opacity="1"></use>
        </g>
      </svg>
    </button>
  </div>

  <div id="bpmn-container"></div>
</div>
</body>
</html>
